<script setup lang="ts">
import {onMounted, reactive, useTemplateRef} from "vue";
import {customerList as list} from "@/dt-lib/plug/api/admin/customerCenter";

import MyCardTable from "@/dt-lib/components/MyCardTable.vue";

import type {PostItem} from "@/dt-lib/pages/home/customerCenter/components/customerSearchComp.vue";
import {pageDefault} from "@/dt-lib/pages/home/customerCenter/components/customerSearchComp.vue";

const searchRef = useTemplateRef('searchRef');

interface PageData {
  pages: number;
  page: number;
  limit: number;
  total: number;
  list: Array<RowVO[]>;
}


const getSearch = (searchData: PostItem) => {
  // console.log("searchData", searchData)

  const searchDataCloned = JSON.parse(JSON.stringify(searchData))

  // 浅拷贝日期会丢失，这里从原数据拿日期数据
  searchDataCloned.date_start = searchData.date[0]
  searchDataCloned.date_end = searchData.date[1]

  searchDataCloned.brand = searchDataCloned.brand.join(',')
  searchDataCloned.shop = searchDataCloned.shop.join(',')
  searchDataCloned.city = searchDataCloned.city.join(',')

  searchDataCloned.add_user_id = searchDataCloned.add_user_id.join(',')

  // console.log("searchDataCloned", searchDataCloned)

  const addDeptIdArr: number[] = []
  if (searchDataCloned.add_dept_id.length > 0) {
    searchDataCloned.add_dept_id.forEach(searchAddDeptIdArr => {
      searchAddDeptIdArr.forEach(addDeptId => {
        addDeptIdArr.push(addDeptId)
      })
    })
  }

  const addDeptIds = [...new Set(addDeptIdArr)]

  searchDataCloned.add_dept_id = addDeptIds.join(',')

  searchDataCloned.operator_user_id = searchDataCloned.operator_user_id.join(',')

  const operatorDeptIdArr: number[] = []
  if (searchDataCloned.operator_user_dept.length > 0) {
    searchDataCloned.operator_user_dept.forEach(searchOperatorDeptIdArr => {
      searchOperatorDeptIdArr.forEach(operatorDeptId => {
        operatorDeptIdArr.push(operatorDeptId)
      })
    })
  }

  const operatorDeptIds = [...new Set(operatorDeptIdArr)]

  searchDataCloned.operator_user_dept = operatorDeptIds.join(',')


  searchDataCloned.keyword = searchDataCloned.keyword.trim()

  delete searchDataCloned.date

  // console.log(searchDataCloned);

  gridOptions.loading = true
  list(searchDataCloned).then(res => {
    handlePageData(res.data)
  }).finally(() => {
    gridOptions.loading = false
  })

}

import type {VxeGridProps} from 'vxe-table'
import {
  formatCartStatusText,
  formatCusTypeCss,
  formatCusTypeText,
  formatDate, formatDateYmd
} from "@/dt-lib/help/fun.ts";


import {Edit} from "@element-plus/icons-vue";
import CustomerSearchComp from "@/dt-lib/pages/home/customerCenter/components/customerSearchComp.vue";
import CustomerProfileComp from "@/dt-lib/pages/home/customerCenter/components/customerProfileComp.vue";

interface RowVO {
  add_user_id: number
  add_user_name: string
  appoint_follow: number
  appoint_follow_name: string
  appoint_follow_time: number
  appoint_time: number
  bra_name: string
  cart_id: number
  city_name: string
  cus_id: number
  cus_img: string
  cus_name: string
  cus_sex: number
  cus_type: number
  dept_city_id: number
  dept_id: number
  end_time: number
  order_date_id_user: number
  order_user_name: string
  projects: string
  remarks: string
  shop_name: string
  status: number
}

const handlePageData = (pageData: PageData) => {
  gridOptions.data = pageData.list
  pagerVO.total = pageData.total
  pagerVO.pageSize = pageData.limit
  pagerVO.currentPage = pageData.page
}

const pagerVO = reactive({
  total: 0,
  currentPage: pageDefault.page,
  pageSize: pageDefault.limit
})

const gridOptions = reactive<VxeGridProps<RowVO>>({
  stripe: true,
  round: true,
  border: true,
  loading: false,
  height: 854,
  headerAlign: "center",
  cellConfig: {
    height: 80
  },
  columns: [
    {type: 'seq', width: 70, align: 'center'},
    {
      field: 'cart_id',
      title: '客户信息',
      align: 'center',
      resizable: true,
      width: 220,
      minWidth: 200,
      maxWidth: 300,
      slots: {default: 'customer_default'}
    },
    {field: 'cus_type', title: '客户类型', width: 80, align: 'center', slots: {default: 'cus_type_default'}},
    {field: 'kaikou_nums', title: '开口', width: 100, align: 'center', slots: {default: 'kaikou_nums_default'}},
    {
      field: 'wechat_join_day',
      title: '加微日期',
      width: 150,
      align: 'center',
      slots: {default: 'wechat_join_day_default'}
    },

    {
      field: 'first_deposit',
      title: '首次下定日期',
      width: 150,
      align: 'center',
      slots: {default: 'first_deposit_default'}
    },
    {
      field: 'first_shop',
      title: '首次到店日期',
      width: 150,
      align: 'center',
      slots: {default: 'first_shop_default'}
    },
    {field: 'shop_name', title: '归属门店', width: 150, align: 'center'},
    {field: 'name_add_op', title: '添加人', width: 150, align: 'center', slots: {default: 'name_add_op_default'}},
    {field: 'id_ascr_op', title: '归属人', width: 150, align: 'center', slots: {default: 'id_ascr_op_default'}},
    {
      field: 'operator_user_id',
      title: '推广人',
      width: 150,
      align: 'center',
      slots: {default: 'operator_user_default'}
    },
    {field: 'bra_name', title: '品牌', width: 100, align: 'center'},
    {field: 'city_name', title: '城市', width: 100, align: 'center', slots: {default: 'city_name_default'}},
  ],
  seqConfig: {
    seqMethod({rowIndex}) {
      return (pagerVO.currentPage - 1) * pagerVO.pageSize + rowIndex + 1
    }
  },
  data: <RowVO[]>[]
})

onMounted(() => {
  searchRef.value?.onSearch(pagerVO.pageSize, pagerVO.currentPage)
})

const handleSizeChange = (pageSize: number) => {
  pagerVO.currentPage = pageDefault.page
  pagerVO.pageSize = pageSize
  searchRef.value?.onSearch(pagerVO.pageSize, pagerVO.currentPage)
}
const handleCurrentChange = (currentPage: number) => {
  pagerVO.currentPage = currentPage
  searchRef.value?.onSearch(pagerVO.pageSize, pagerVO.currentPage)
}

const pageTitle = '客户列表'
const pageTitleAs = 'customer'

</script>

<template>
  <div class="app-page">
    <div class="app-page-pd15">

      <my-card-table :title="pageTitle">
        <template #table-search>
          <customer-search-comp ref="searchRef" :btLoading="gridOptions.loading" @search="getSearch"/>
        </template>

        <vxe-grid v-bind="gridOptions">
          <template #empty>
            <el-empty description=""/>
          </template>


          <template #customer_default="{ row }">
            <customer-profile-comp :customer="row"/>
          </template>

          <template #wechat_join_day_default="{ row }">
            {{ formatDateYmd(row.wechat_join_day, false) }}
          </template>

          <template #first_deposit_default="{ row }">
            {{ formatDateYmd(row.first_deposit, false) }}
          </template>
          <template #first_shop_default="{ row }">
            {{ formatDateYmd(row.first_shop, false) }}
          </template>

          <template #cus_type_default="{ row }">
            <el-tag :type="formatCusTypeCss(row.cus_type)">{{ formatCusTypeText(row.cus_type) }}</el-tag>
          </template>

          <template #name_add_op_default="{ row }">
            <div>{{ row.name_add_op }}</div>
            <div>
              <el-text type="info">{{ row.name_add_dept }}</el-text>
            </div>
          </template>

          <template #id_ascr_op_default="{ row }">
            <div>{{ row.name_ascr_op }}</div>
            <div>
              <el-text type="info">{{ row.name_ascr_dept }}</el-text>
            </div>
          </template>

          <template #operator_user_default="{ row }">
            <div>{{ row.operator_user_name }}</div>
            <div>
              <el-text type="info">{{ row.operator_dept_name }}</el-text>
            </div>
          </template>

          <template #city_name_default="{ row }">
            <div>{{ row.city_name }}</div>
            <div>
              <el-text type="info">{{ row.area_name }}</el-text>
            </div>
          </template>

          <template #kaikou_nums_default="{ row }">

              <el-tag :type="row.kaikou_nums>0?'success':'info'"  size="small">
                {{ row.kaikou_nums>0?row.kaikou_nums + '次开口':'不开口' }}
              </el-tag>

          </template>

        </vxe-grid>

        <template #footer>

          <el-pagination
              v-model:current-page="pagerVO.currentPage"
              v-model:page-size="pagerVO.pageSize"
              :page-sizes="pageDefault.sizes"
              :background="pageDefault.background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagerVO.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              style="justify-content: flex-end; width: 100%"
          />

        </template>

      </my-card-table>


    </div>


  </div>


</template>

<style scoped lang="scss">
.appoint_follow_name {
  display: flex;
  align-items: center;
  flex-direction: column;

  .name {
    display: flex;
    align-items: center;
  }

  .date {
    font-size: 12px;
  }
}


</style>